<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test Order Box</title>
	
	<style type="text/css">
	
	div.uiButton {
		width: 60px;
		height: 24px;
		display: inline-table;
		
		text-align: center;
		
		background-color: silver;
		border: 1px solid white;
		outline: 1px solid black;
	}
	
	div.uiButton:hover {
		background-color: gray;
		cursor: pointer;
	}
	
	.alignCenter {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	
	#orderBox {
		width: 300px;
		min-height: 500px;
		
		background-color: #B0B0FF;
	}
	
	.orderBoxButtons {
		width: 20px;
	}
	
	.orderBoxQuantity {
		width: 40px;
		text-decoration: underline;
	}
	
	.orderBoxName {
		width: 100px;
	}
	
	.orderBoxPrice {
		width: 30px;
	}
	
	.orderBoxQuantityBox {
		width: 20px;
	}
	
	</style>
	
	<script type="text/javascript">

		var currentIndex = 0;
		var items = new Array();

		function OrderItem (id, quantity, unitPrice) {
			this.id = id;
			this.quantity = quantity;
			this.unitPrice = unitPrice;
			this.setQuantity = setQuantity;
			this.getExtended = getExtended;
		}

		function setQuantity (quantity) {
			this.quantity = quantity;
		}

		function getExtended () {
			return this.quantity * this.unitPrice;
		}

		OrderItem.prototype.toString = function orderItemToString() {
			return this.id + ';' + this.quantity;
		}
		
		function updateSubtotal () {
			var subtotal = 0;
			for (var i = 0; i < items.length; i++) {
				if (items[i] != null)
					subtotal += (items[i].getExtended());
			}
			var subText = document.getElementById('orderSubtotal');
			var child = subText.firstChild;
			subText.replaceChild(document.createTextNode(subtotal.toFixed(2)), child);
		}
		
		function removeOrderItem (index) {
			var row = document.getElementById('orderRow' + index);
			row.parentNode.removeChild(row);
			items[index] = null;
			updateSubtotal();
		}

		function updateOrderItem (index, newqty) {
			//check for bad qty
			
			if (newqty == 0) {
				removeOrderItem(index);
				return;
			}
			
			var priceText = document.getElementById('priceText' + index);
			items[index].setQuantity(newqty);
			
			var child = priceText.firstChild;
			priceText.replaceChild(document.createTextNode(items[index].getExtended().toFixed(2)), child);
			
			updateSubtotal();
		}

		function addItemToOrder (id, nameVal, priceVal) {
			for (var i = 0; i < items.length; i++) {
				if (items[i] != null)
					if (items[i].id == id) {
						document.getElementById('quantityBox' + i).value = items[i].quantity + 1;
						updateOrderItem(i, items[i].quantity + 1);
						return;
					}
			}
			addOrderItem(id, nameVal, priceVal);
		}
		
		function addOrderItem (id, nameVal, priceVal) {
			items[currentIndex] = new OrderItem(id, 1, priceVal);
			
			var body = document.getElementById('orderBoxBody');
			var row = document.createElement('tr');
			row.setAttribute('id', 'orderRow' + currentIndex);

			var buttons = document.createElement('td');
			var delButton = document.createElement('a');
			delButton.setAttribute('onclick', 'removeOrderItem(' + currentIndex + ')');
			delButton.appendChild(document.createTextNode('x'));
			buttons.appendChild(delButton);

			var updButton = document.createElement('a');
			updButton.setAttribute('onclick', 'updateOrderItem(' + currentIndex + ', document.getElementById(\'quantityBox' + currentIndex + '\').value)');
			updButton.appendChild(document.createTextNode('u'));
			buttons.appendChild(updButton);
			
			var quantity = document.createElement('td');
			var quantityInput = document.createElement('input');
			quantityInput.setAttribute('id', 'quantityBox' + currentIndex);
			quantityInput.setAttribute('class', 'orderBoxQuantityBox');
			quantityInput.setAttribute('type', 'text');
			quantityInput.setAttribute('value', '1');
			quantityInput.setAttribute('maxlength', '2');
			quantity.appendChild(quantityInput);

			var name = document.createElement('td');
			name.appendChild(document.createTextNode(nameVal));

			var price = document.createElement('td');
			price.setAttribute('id', 'priceText' + currentIndex);
			price.appendChild(document.createTextNode(priceVal));
			
			row.appendChild(buttons);
			row.appendChild(quantity);
			row.appendChild(name);
			row.appendChild(price);
			body.appendChild(row);

			currentIndex++;
			updateSubtotal();
		}

		function doCheckout () {
			var form = document.getElementById('checkoutForm');
			var contents = document.getElementById('cartContents');
			contents.value = items.join();
			form.submit(); 
		}
		
	</script>
</head>
<body>

<div id="orderBox">
<h3 class="alignCenter">Order</h3>
<table class="alignCenter" border="1">
	<thead><tr>
		<th class="orderBoxButtons"></th>
		<th class="orderBoxQuantity">Qty</th>
		<th class="orderBoxName"></th>
		<th class="orderBoxPrice"></th>
	</tr></thead>
	<tbody id="orderBoxBody">
		<!--tr>
			<td>x</td>
			<td>
				<input class="orderBoxQuantityBox" type="text" maxlength="2" value="1" />
			</td>
			<td>Blank Item</td>
			<td>0.00</td>
		</tr-->
	</tbody>
	<tr>
		<td colspan="4">--------------------------------------</td>
	</tr>
	<tr>
		<th colspan="2"></th>
		<th>Subtotal</th>
		<th id="orderSubtotal">0.00</th>
	</tr>
</table>

<br/>
<table>
	<tr>
		<td>
			<form id="checkoutForm" action="/ordrs/external/checkout" method="post">
				<input id="cartContents" name="contents" value="" type="hidden" />
			</form>
			<div class="uiButton" onclick="doCheckout()">Checkout</div></td>
		<td><div class="uiButton">Clear</div></td>
	</tr>
</table>
</div>

<h3>Menu</h3>
<table>
	<tr>
	<th></th>
	<th style="width: 100px;"></th>
	<th></th>
	</tr>
	<tr>
		<td><div class="uiButton" onclick="addItemToOrder(1, 'Item Name 1', '3.45')">Add</div></td>
		<td>Item Name 1</td>
		<td>$ 3.45</td>
	</tr>
	<tr>
		<td><div class="uiButton" onclick="addItemToOrder(2, 'Item Name 2', '4.56')">Add</div></td>
		<td>Item Name 2</td>
		<td>$ 4.56</td>
	</tr>
</body>
</html>
